<template>
  <div>
    <div class="dh">
      <img class="p1" src="../assets/Logo.png" />
      <span class="t1">海豚BUS</span>
      <div class="dh1">

        <router-link to="/recommend" class="nav" :class="{on:'/'===$route.path}" style="color:black" >首页</router-link>
         <router-link to="/introduce" :class="{on:'/'===$route.path}" style="color:black" >介绍</router-link>
          <router-link to="/road" class="nav" :class="{on:'/'===$route.path}" style="color:black">线路查询</router-link>
            <span buttoclass="nav" style="color:black; cursor: pointer;" @click="toEmployee">员工通道</span>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
               <el-submenu index="2">
               <template slot="title"><i class="iconfont" style="font-size:1.3rem;color:black">&#xe60d;</i></template>
               <el-menu-item index="2-1">用户信息</el-menu-item>
               <el-menu-item index="2-2">设置</el-menu-item>
               <el-menu-item index="2-3">历史记录</el-menu-item>
               <el-menu-item index="2-4">联系推荐</el-menu-item>
               </el-submenu>
            </el-menu>

    </div>
  </div>
  </div>
</template>
<script>
// import {employee} from '../api/employee'
export default {
  name: "Navigation",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toEmployee(){
      this.$router.push('/Manager/staffManagement')
      // console.log(this.$store.state.username);
      // employee({username: this.$store.state.username}).then(res => {
      //   if (res.data.data.msg == 0){
      //     this.$notify({
      //            message: '您不是员工',
      //            });
      //   }else {
      //     this.$router.push('/Manager/staffManagement')
      //   }
      // })
    }
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.el-menu {
  border-right: solid 1px #e6e6e6;
  list-style: none;
  outline: none;
  border: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #f8f8f8 !important;
}
#id {
 
  background-color: aqua;
  width: 10%;
  height: 100%;
}
#btn {
  background-color: #f8f8f8;
  outline: none;
  border: none;
}
.dh {
  width: 100%;
  height: 10%;
  background-color: #f8f8f8;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  /* justify-content: center; */
  align-items: center;
  flex-wrap: wrap;
}
.p1 {
  height: 60%;
  position: relative;
  left: 7%;
}
.t1 {
  font-size: 23px;
  position: relative;
  left: 7.5%;
  font-weight: bold;
}
.dh1 {
  height: 100%;
  width: 30%;
  position: relative;
  font-size: 13px;
  left: 55%;
  /* background-color: bisque; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
}

.on:hover,
.on:active {
  font-weight: bold;
  color: #7bc2ed !important;
}
</style>
>
